<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <title>9.9活动创建</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="wrapper">
    <p class="title">9.9活动创建</p>
    <div class="content">
        <!--表单标题开始-->
        <div class="formTitle">
            <p>新建9.9活动</p>
        </div>
        <!--表单标题结束-->
        <!--操作提示框开始-->
        <div class="explanation">
            <span class="explanation_icon"></span>
            <span>操作提示</span>
            <span class="fold" title="点击收起提示"></span>
            <ul>
                <li>该页面展示了商城9.9包邮活动商品信息</li>
                <li>可搜索活动商品名称关键词进行查询，侧边栏可进行高级搜索</li>
            </ul>
        </div>
        <!--新建9.9活动表单开始-->
        <div class="formContent">
            <a href="javascript:;" class="btn btn-warning btn-sm">返 回</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="formArea">
                <div class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="" class="col-sm-3 col-md-3 col-lg-3 control-label">活动名称：</label>
                        <div class="col-sm-6 col-md-6 col-lg-6">
                            <input type="text" class="form-control" id="" placeholder="请输入活动名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-3 col-md-3 col-lg-3 control-label">活动编号：</label>
                        <div class="col-sm-6 col-md-6 col-lg-6">
                            <input type="text" class="form-control" id="" placeholder="请输入活动编号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 col-md-3 col-lg-3 control-label" for="">上传活动图片：</label>
                        <div class="col-sm-6 col-md-6 col-lg-6 ">
                            <input type="file" id="" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-3 col-md-3 col-lg-3 control-label">活动开始时间：</label>
                        <div class="col-sm-6 col-md-6 col-lg-6">
                            <input type="text" class="form-control" id="" placeholder="请输入活动开始时间">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-3 col-md-3 col-lg-3 control-label">活动结束时间：</label>
                        <div class="col-sm-6 col-md-6 col-lg-6">
                            <input type="text" class="form-control" id="" placeholder="请输入活动结束时间">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-3 col-md-3 col-lg-3 control-label">设置活动价格：</label>
                        <div class="col-sm-6 col-md-6 col-lg-6">
                            <input type="text" class="form-control" id="" placeholder="请输入活动价格">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 col-md-3 col-lg-3 control-label">选择是否包邮：</label>
                        <div class="col-sm-3 col-md-3 col-lg-3">
                            <label class="checkbox-inline">
                                <input type="radio" name="post" id="" value="" checked> 包 邮
                            </label>
                            <label class="checkbox-inline">
                                <input type="radio" name="post" id="" value=""> 不包邮
                            </label>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-6">
                            <button class="btn btn-success btn-sm addActiveProduct">添加活动产品：</button>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-3 col-md-offset-3 col-lg-offset-3 col-sm-6 col-md-6 col-lg-6">
                            <input type="submit" class="btn btn-block btn-primary" value="提交创建活动">
                            <!--<button type="submit" class="btn btn-block btn-primary">登录</button>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--新建9.9活动表单结束-->
    </div>
</div>
<!--页脚版权开始-->
<div class="footer">
    <p>云南极速电子商务有限公司版权所有</p>
</div>
<!--页脚版权结束-->
<!--添加活动产品弹出框开始-->
<div class="addBox">
    <div class="searchBox">
        <div class="bs-example bs-example-form" role="form">
            <div class="input-group col-lg-12">
                <input type="text" class="form-control" placeholder="">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>
            </div>
        </div>
    </div>
    <div class="productList">
        <table class="table table-hover">
            <thead>
            <tr>
                <th><div><label><input type="checkbox"  name=""/></label></div></th>
                <th><div><span>商品名称</span></div></th>
                <th><div><span>价格</span></div></th>
                <th><div><span>销量</span></div></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><div><label><input type="checkbox"  name=""/></label></div></td>
                <td><div><p>商品名称</p></div></td>
                <td><div> <p class="text-danger">￥29.90</p> </div></td>
                <td><div> <p>1850</p> </div></td>
            </tr>
            <tr>
                <td><div><label><input type="checkbox"  name=""/></label></div></td>
                <td><div><p>商品名称</p></div></td>
                <td><div> <p class="text-danger">￥29.90</p> </div></td>
                <td><div> <p>1850</p> </div></td>
            </tr>
            <tr>
                <td><div><label><input type="checkbox"  name=""/></label></div></td>
                <td><div><p>商品名称</p></div></td>
                <td><div> <p class="text-danger">￥29.90</p> </div></td>
                <td><div> <p>1850</p> </div></td>
            </tr>
            <tr>
                <td><div><label><input type="checkbox"  name=""/></label></div></td>
                <td><div><p>商品名称</p></div></td>
                <td><div> <p class="text-danger">￥29.90</p> </div></td>
                <td><div> <p>1850</p> </div></td>
            </tr>
            <tr>
                <td><div><label><input type="checkbox"  name=""/></label></div></td>
                <td><div><p>商品名称</p></div></td>
                <td><div> <p class="text-danger">￥29.90</p> </div></td>
                <td><div> <p>1850</p> </div></td>
            </tr>
            <tr>
                <td><div><label><input type="checkbox"  name=""/></label></div></td>
                <td><div><p>商品名称</p></div></td>
                <td><div> <p class="text-danger">￥29.90</p> </div></td>
                <td><div> <p>1850</p> </div></td>
            </tr>
            <tr>
                <td><div><label><input type="checkbox"  name=""/></label></div></td>
                <td><div><p>商品名称</p></div></td>
                <td><div> <p class="text-danger">￥29.90</p> </div></td>
                <td><div> <p>1850</p> </div></td>
            </tr>
            <tr>
                <td><div><label><input type="checkbox"  name=""/></label></div></td>
                <td><div><p>商品名称</p></div></td>
                <td><div> <p class="text-danger">￥29.90</p> </div></td>
                <td><div> <p>1850</p> </div></td>
            </tr>
            <tr>
                <td><div><label><input type="checkbox"  name=""/></label></div></td>
                <td><div><p>商品名称</p></div></td>
                <td><div> <p class="text-danger">￥29.90</p> </div></td>
                <td><div> <p>1850</p> </div></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="addBtnGroup">
        <a href="javascript:;" class="btn btn-sm btn-success addBtn">添 加</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="javascript:;" class="btn btn-sm btn-danger closeBtn">关 闭</a>
    </div>
</div>
<!--添加活动产品弹出框结束-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--添加产品弹出框的显示与隐藏开始-->
<script>
    window.onload = function()
    {
        //显示/隐藏添加产品弹出框
        var oAddBtn = document.getElementsByClassName('addActiveProduct')[0];
        var addBox = document.getElementsByClassName('addBox')[0];
        var addBtn = document.getElementsByClassName('addBtn')[0];
        var closeBtn = document.getElementsByClassName('closeBtn')[0];
        var onOff = true;

        oAddBtn.onclick = function(){showHidden(addBox,'block','none');};
        addBtn.onclick = function(){showHidden(addBox,'block',null);};
        closeBtn.onclick = function(){showHidden(addBox,'block',null);};
        function showHidden(name,value1,value2)
        {
            if(onOff)
            {
                name.style.display = value1;
            }
            else
            {
                name.style.display = value2;
            }
            onOff = !onOff;
        }

        //全选与取消全选弹出框的列表项
        var aTable = document.getElementsByTagName('table');
        var oCheck = aTable[0].getElementsByTagName('thead')[0].getElementsByTagName('input')[0];
        var aCheck = aTable[0].getElementsByTagName('tbody')[0].getElementsByTagName('input');

        oCheck.onclick = function()
        {
            for(var i=0;i<aCheck.length;i++)
            {
                if(oCheck.checked ==true)
                {
                    aCheck[i].checked = true;
                }
                else
                {
                    aCheck[i].checked = false;
                }
            }
        };
    }
</script>
<!--添加产品弹出框的显示与隐藏结束-->
</body>
</html>